<template>
  <div class="addVendor">
    <el-form :model="vendorCreateForm" :rules="rules" ref="vendorCreateForm" label-width="100px">
      <div class="vendor-info">
        <h3>商家信息</h3>
        <el-form-item label="公司名称" prop="vendorName">
          <el-input v-model="vendorCreateForm.vendorName"></el-input>
        </el-form-item>
        <el-form-item label="法人" prop="legalPerson">
          <el-input v-model="vendorCreateForm.legalPerson"></el-input>
        </el-form-item>
        <el-form-item label="税务登记号" prop="taxationAffairsRegistration">
          <el-input v-model="vendorCreateForm.taxationAffairsRegistration"></el-input>
        </el-form-item>
        <el-form-item label="注册资金" prop="registeredCapital">
          <el-input v-model="vendorCreateForm.registeredCapital"></el-input>
        </el-form-item>
        <el-form-item label="注册地址" prop="registeredAddress">
          <v-distpicker :province="selectRegisteredAddress.province" :city="selectRegisteredAddress.city"
                        :area="selectRegisteredAddress.area"></v-distpicker>
          <el-input class="addressInput" v-model="vendorCreateForm.registeredAddress"></el-input>
        </el-form-item>
        <el-form-item label="通讯地址" prop="address">
          <v-distpicker :province="selectVendorAddress.province" :city="selectVendorAddress.city"
                        :area="selectVendorAddress.area"></v-distpicker>
          <el-input class="addressInput" v-model="vendorCreateForm.address"></el-input>
        </el-form-item>
        <el-form-item label="商家官网地址" prop="website">
          <el-input v-model="vendorCreateForm.website"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input v-model="vendorCreateForm.comment"></el-input>
        </el-form-item>
      </div>
      <div class="vendor-connect-person">
        <h3>联系人</h3>
        <el-form-item label="联系人" prop="contact_name">
          <el-input v-model="vendorCreateForm.contact_name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="vendorCreateForm.contact"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="vendorCreateForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-input v-model="vendorCreateForm.fax"></el-input>
        </el-form-item>
        <el-form-item label="email" prop="email">
          <el-input v-model="vendorCreateForm.email"></el-input>
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitCreateVendorForm('vendorCreateForm')">立即创建</el-button>
        <el-button @click="resetCreateVendorForm('vendorCreateForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  import axios from 'axios'
  //  import Hub from '@/assets/utils/Hub'
  export default {
    components: {
      VDistpicker
    },
    data () {
      return {
        selectRegisteredAddress: {province: '北京市', city: '北京市', area: '朝阳区'},
        selectVendorAddress: {province: '北京市', city: '北京市', area: '朝阳区'},
        vendorCreateForm: {
          vendorName: '',
          legalPerson: '',
          taxationAffairsRegistration: '',
          registeredCapital: 10,
          registeredAddress: '',
          address: '',
          website: '',
          contact_name: '',
          comment: '',
          contact: '',
          phone: null,
          fax: null,
          email: ''
        },
        rules: {
          vendorName: [
            {required: true, message: '请输入公司名称，100个字符以内', trigger: 'change', max: 100, min: 2}
          ],
          legalPerson: [
            {required: true, message: '请输入法人，20个字符以内', trigger: 'change', max: 20, min: 2}
          ],
          registeredCapital: [
            {required: false, message: '请输入注册资金(单位：万元)，数字'}
          ],
          registeredAddress: [
            {required: false, message: '请输入注册地址', trigger: 'change'},
            {max: 100, min: 5, message: '输入字符最少5个，最多100个'}
          ],
          address: [
            {required: false, message: '请输入通讯地址', trigger: 'change'},
            {max: 100, min: 5, message: '输入字符最少5个，最多100个'}
          ],
          email: [
            {type: 'email', required: false, message: '请输入正确的邮箱地址！'}
          ],
          contact_name: [
            {required: true, message: '20个字符以内'}
          ],
          phone: [
            {required: true, message: '请输入正确手机号码', validator: this.phoneNumberCheck}
          ]
        }
      }
    },
    methods: {
      phoneNumberCheck (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入电话号码'))
        } else if (!(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(value))) {
          callback(new Error('请输入正确的格式!'))
        } else {
          callback()
        }
      },
      submitCreateVendorForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.choiceAndSave()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetCreateVendorForm (formName) {
        this.$refs[formName].resetFields()
      },
      choiceAndSave () {
        this.vendorCreateForm.registeredAddress = this.selectRegisteredAddress.province + '-' +
                                                  this.selectRegisteredAddress.city + '-' +
                                                  this.selectRegisteredAddress.area + '-' +
                                                  this.vendorCreateForm.registeredAddress
        this.vendorCreateForm.address = this.selectVendorAddress.province + '-' +
                                        this.selectVendorAddress.city + '-' +
                                        this.selectVendorAddress.area + '-' +
                                        this.vendorCreateForm.address
        axios.post('/api/vendor/addVendor', this.vendorCreateForm).then((res) => {
          if (res.data.code === 9999) {
            this.$notify({
              title: '创建成功！',
              message: this.$createElement('i', {style: 'color: green'}, res.data.msg.context),
              duration: 2000
            })
            this.$router.push('/query-list')
          }
        })
      }
    },
    created () {
    }
  }

</script>

<style lang="less" rel="stylesheet/less" scoped>
  .address {
    display: inline-flex;
    justify-content: space-around;
  }

  .addressInput {
    width: 600px;
    margin: 10px 0;
  }

  .vendor-connect-person, .vendor-info {
    border: #aaa 1px solid;
    margin: 10px;
    padding: 10px;
    h3 {
      background: #eee;
      border: 1px solid #aaa;
      margin-bottom: 10px;
      padding: 5px;
    }
  }
</style>
